<template>
	<view>
		
		<view class="container">
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true"
					class="swiper-box" easing-function="easeInCubic">
					<swiper-item v-for="(item,i) in info" class="swiper-item" :key="i">
						<image :src="item.imgsrc" mode="widthFix" class="img-save"></image>
					</swiper-item>

				</swiper>
			</view>
			<view class="out-serve">
				<topTitle :title="title"></topTitle>
				<view class="money-cz">
					<view class="cz-content" @click="outpatinet(2)">
						<view class="cz-title">
							<text>预约挂号</text>
							<text class="title3">在线预约挂号</text>
						</view>
						<view class="icon">
                            <text class="iconfont icon-yisheng"></text>
						</view>
					</view>
					<view class="cz-content " @click="outpatinet(1)" >
						<view class="cz-title">
							<text>在线充值</text>
							<text class="title3">就诊卡预约充值</text>
						</view>
						<view class="icon">
                            <text class="iconfont icon-bingfang"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="test-li">
				<iconfont v-for="(item,i) in ifont" :ifont="item" @skip="skip" :key="i"></iconfont>
			</view>
			<view class="yy-serve">
				<topTitle :title="title1"></topTitle>
				<view class="test-li">
					<iconfont v-for="(item,i) in yyserve" :ifont="item" @skip="skip" :key="i"></iconfont>
				</view>
				
			</view>
			<view class="yy-serve zy-int">
				<topTitle :title="title2"></topTitle>
				<view class="test-li">
					<iconfont v-for="(item,i) in zyserve" :ifont="item" @skip="skip" :key="i"></iconfont>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import topTitle from '@/components/index/title/title.vue'
	import iconfont from '@/components/index/testLi/testLi.vue'
	import {
		ref,
		reactive,
		toRefs,

	} from 'vue'
	export default {
		components: {
			topTitle,
			iconfont
		},
		setup() {
			const banner = reactive({
				info: [{
						imgsrc: '../../../static/images/banner1.png',
						path: '',
						content: 'banner1'
					},
					{
						imgsrc: '../../../static/images/banner2.png',
						path: '',
						content: 'banner2'
					}, {
						imgsrc: '../../../static/images/banner3.png',
						path: '',
						content: 'banner3'
					}
				],
				current: 0,
				mode: 'round',
				title: '门诊服务',
				ifont: [{
						icon: 't-icon-ziyuan31',
						title: '候诊查询',
						path: ''
					},
					{
						icon: 't-icon-jianyanke',
						title: '自助缴费',
						path: ''
					},
					{
						icon: 't-icon-kangfuke_1',
						title: '门诊费用',
						path: ''
					},
					{
						icon: 't-icon-yingyangke',
						title: '在线退款',
						path: ''
					},
					{
						icon: 't-icon-xieyebingke',
						title: '报告查询',
						path: ''
					},
					{
						icon: 't-icon-kouqiangneike',
						title: '病例查询',
						path: ''
					},
					{
						icon: 't-icon-xinxieguanneike',
						title: '核酸检测',
						path: '/pages/home/hesuandetect/hsdetect/hsdetect'
					},
					{
						icon: 't-icon-zhongliuwaike',
						title: '体检服务',
						path: '/pages/home/bodyExamine/bodyExamine/bodyExamine'
					},
				],
				title1:'住院服务',
				yyserve:[
					{
						icon: 't-icon-shenneike',
						title: '候诊查询',
						path: ''
					},
					{
						icon: 't-icon-fengshimianyike',
						title: '候诊查询',
						path: ''
					},
					{
						icon: 't-icon-yaojike_1',
						title: '候诊查询',
						path: ''
					},
					
				],
				zyserve:[
					{
						icon: 't-icon-HeartRate',
						title: '医院介绍',
						path: ''
					},
				],
				title2:'医院服务',
			})
			const skip = (path) => {
                 console.log(path,111);
				 uni.navigateTo({
				 	url:path
				 })
			}
			const outpatinet=(path)=>{
				console.log(path);
				uni.navigateTo({
					url:"/pages/home/bookingReg/seletPeo/seletPeo"
				})
			}
			return {
				...toRefs(banner)
				,skip,outpatinet
			}
		}
	}
</script>

<style lang="scss">
	.flex1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex {
		display: flex;
		flex-flow: column;
	}

	$font1:20rpx;
	$font2:24rpx;
	$font3:28rpx;
	$font4:32rpx;

	.container {
		@extend .flex;
		box-sizing: border-box;
		padding: 0 36rpx;
        font-size: $font4;
		
		.banner {
			margin-bottom: 20rpx;

			.swiper-box {
				height: 360rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				overflow: hidden;
				width: 100%;                
				.swiper-item {
					height: 100%;
					padding: 0;
					margin: 0;
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;
					.img-save {
						width: 100%;
						border-radius: 20rpx;
						height: 100%;
						overflow: hidden;
						
					}
				}
			}
		}

		.out-serve {
			margin-bottom: 20rpx;

			.money-cz {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 20rpx;
				height: 180rpx;

				>view {
					background-color:#FFE4E1;
					border-radius: 20rpx;
					color: #CC3333;
					.icon {
						display: flex;
						align-items: center;
						justify-content: center;
						
						.iconfont {
							font-size: 42rpx;
						}
					}
				}

				>view:nth-child(2) {
					color: #2E8B57;
					background-color:rgb(187, 255, 255);

					.icon {
						background-color:#66CDAA;
						text-align: center;
						.iconfont {
							line-height: 40rpx;
							font-size: 42rpx;
						}
					}
				}
			}

			.cz-content {
				padding: 32rpx;
				@extend .flex1;

				text {
					display: block;
					padding: 6rpx;
				}

				.title3 {
					font-size: $font1;
				}

				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					background-color: #FF9999;
				}

			}
		}

		.test-li {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 32rpx;
			margin-top: 20rpx;
			font-size: $font3;
		}
		.yy-serve{
			margin-top: 36rpx;
		}
		// #ifdef MP-WEIXIN
     .zy-int{
		 margin-bottom: 40rpx;
	 }
	 // #endif
	 // #ifndef MP-WEIXIN
	 .zy-int{
	 		 margin-bottom: 140rpx;
	 }
	 // #endif
	}
</style>
